﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Button
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Button</h2>


    <fieldset>
        <legend>Default functionality</legend>
        
        <div id="DemoDefault">
	        <button id="botao1">A button element</button>
	        <input id="botao2" type="submit" value="A submit button"/>
	        <a href="#" id="link1">An anchor</a>
	        <a href="#" id="link2">An anchor with alert</a>
        </div>
        
        <%= 
            Html.jQueryUI( ).Button( ).ID( "botao1" ).ToString( )
                            .Button( ).ID( "botao2" ).ToString( )
                            .Button( ).ID( "link1" ).IsLink( true ).ToString( )
                            .Button( ).ID( "link2" ).IsLink( true ).Click( "alert('clicked');" ).ToString( )
        %>
    </fieldset>
    
    <fieldset>
        <legend>Radios</legend>
        
        <div id="DemoRadios">
	    <form>
		    <div id="radio">
			    <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
			    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
			    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
		    </div>
	    <%= Html.jQueryUI( ).Button( TípoBotao.Radios ).ID( "radio" ).ToString( ) %>
	    
	    </form>
</div>
        
    </fieldset>
    
    <fieldset>
        <legend>Checkboxes</legend>
        
        <div id="DemoCheckboxes">
	        <input type="checkbox" id="check" /><label for="check">Toggle</label>
        	
	        <div id="format">
		        <input type="checkbox" id="check1" /><label for="check1">B</label>
		        <input type="checkbox" id="check2" /><label for="check2">I</label>
		        <input type="checkbox" id="check3" /><label for="check3">U</label>
	        </div>
	        <%= Html.jQueryUI( ).Button( ).ID( "check" ).ToString( )%>
	        <%= Html.jQueryUI( ).Button( TípoBotao.Radios ).ID( "format" ).ToString( )%>
        </div>
    </fieldset>
    
    <fieldset>
        <legend>Icons</legend>
        
        <div id="DemoIcons">
	        <button id="botao10">Button with icon only</button>
	        <button id="botao11">Button with icon on the left</button>
	        <button id="botao12">Button with two icons</button>
	        <button id="botao13">Button with two icons and no text</button>
        </div>
        <%=
            Html.jQueryUI( ).Button( ).ID( "botao10" ).IconPrimary("ui-icon-locked" ).Text( false ) .ToString( )
                            .Button( ).ID( "botao11" ).IconPrimary( "ui-icon-locked" ).Text( false ).ToString( )
                            .Button( ).ID( "botao12" ).IconPrimary( "ui-icon-locked" ).IconSecundary( "ui-icon-triangle-1-s" ).Text( false ).ToString( )
                            .Button( ).ID( "botao13" ).IconPrimary( "ui-icon-locked" ).IconSecundary( "ui-icon-triangle-1-s" ).Text( false ).ToString( )
        %>
    </fieldset>
    
    <fieldset>
        <legend>Toolbar</legend>
        
        <div id="DemoToolbar">
	        <span id="toolbar" class="ui-widget-header ui-corner-all">
		        <button id="beginning">go to beginning</button>
		        <button id="rewind">rewind</button>
		        <button id="play">play</button>
		        <button id="stop">stop</button>
		        <button id="forward">fast forward</button>
		        <button id="end">go to end</button>
        		
		        <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
        		
		        <span id="repeat">
			        <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
			        <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
			        <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
		        </span>
	        </span>
        </div>
        
        <%=
            Html.jQueryUI( ).Button( "#beginning" ).IconPrimary( "ui-icon-seek-start" ).Text( false ).ToString( )
                                        .Button( "#rewind" ).IconPrimary( "ui-icon-seek-prev" ).Text( false ).ToString( )
                                                    .Button( "#play" ).IconPrimary( "ui-icon-play" ).Text( false ).Click( "function() {var options; if ($(this).text() == 'play') { options = { label: 'pause', icons: { primary: 'ui-icon-pause' } }; } else { options = { label: 'play', icons: { primary: 'ui-icon-play' } }; } $(this).button('option', options);}" ).ToString( )
                                        .Button( "#stop" ).IconPrimary( "ui-icon-stop" ).Text( false ).ToString( )
                                        .Button( "#forward" ).IconPrimary( "ui-icon-seek-nex" ).Text( false ).ToString( )
                                        .Button( "#end" ).IconPrimary( "ui-icon-seek-end" ).Text( false ).ToString( )
                            .Button( "#shuffle" ).ToString( )
                            .Button( TípoBotao.Checkboxes, "#repeat" ).ToString( )
        %>
        
        <%
        //$('#play').button({
			//text: false,
			//icons: {
				//primary: 'ui-icon-play'
			//}
		//})
		//.click(function() {var options; if ($(this).text() == 'play') { options = { label: 'pause', icons: { primary: 'ui-icon-pause' } }; } else { options = { label: 'play', icons: { primary: 'ui-icon-play' } }; } $(this).button('option', options);});
		//$('#stop').button({
			//text: false,
			//icons: {
				//primary: 'ui-icon-stop'
			//}
		//})
		//.click(function() {
			//$('#play').button('option', {
				//label: 'play',
				//icons: {
					//primary: 'ui-icon-play'
				//}
		//	});
		//});
		 %>
    </fieldset>
    
    <%--<fieldset>
        <legend>Split Button</legend>
        
        <div id="DemoSplitButton">
	        <div>
		        <button id="rerun">Run last action</button>
		        <button id="select">Select an action</button>
	        </div>

        </div>
    </fieldset>--%>
</asp:Content>
